import { Component, OnInit, Input, ElementRef, AfterViewInit, ViewChild } from '@angular/core';

@Component({
  selector: 'ns-progress',
  templateUrl: './progress.component.html',
  styleUrls: ['./progress.component.css']
})
export class ProgressComponent implements OnInit, AfterViewInit {
  @Input() nsTotal?: number;
  @Input() nsColor?: string;
  @Input() nsAnimate: boolean = true;
  @Input() nsPrecision: number = 0;
  
  @ViewChild('progressBar') progressBar!: ElementRef;
  @ViewChild('progressText') progressText!: ElementRef;

  isTextOutside: boolean = true;
  private _nsPassed: number | string = 0;

  @Input()
  get nsPassed(): number | string {
    return this._nsPassed;
  }
  
  set nsPassed(value: number | string) {
    this._nsPassed = value;
    setTimeout(() => {
      this.updateTextPosition();
      this.updateRippleColor();
    });
  }

  // 用于显示的真实百分比
  get realPercentage(): number {
    if (this.nsTotal) {
      return Number(((Number(this.nsPassed) / this.nsTotal) * 100).toFixed(this.nsPrecision));
    }
    return Number(Number(this.nsPassed).toFixed(this.nsPrecision));
  }

  // 用于进度条显示的百分比（最大100%）
  get barPercentage(): number {
    return Math.min(this.realPercentage, 100);
  }

  get formattedPercentage(): string {
    return this.realPercentage.toFixed(this.nsPrecision) + '%';
  }

  get progressColor(): string {
    if (this.nsColor) {
      return this.nsColor;
    }
    
    // 使用HSL颜色空间
    // hue: 240(蓝) -> 120(绿) -> 60(黄) -> 0(红)
    // saturation: 保持在100%
    // lightness: 保持在50%
    const percent = this.barPercentage / 100;
    let hue: number;
    if (percent <= 0.33) {
      // 从蓝色过渡到绿色
      hue = 240 - (percent * 3 * 120);
    } else if (percent <= 0.66) {
      // 从绿色过渡到黄色
      hue = 120 - ((percent - 0.33) * 3 * 60);
    } else {
      // 从黄色过渡到红色
      hue = 60 - ((percent - 0.66) * 3 * 60);
    }
    
    return `hsl(${hue}, 100%, 50%)`;
  }

  get textColor(): string {
    const color = this.progressColor;
    
    if (this.isTextOutside) {
      return '#333';  // 在外部时始终使用深色
    }

    if (color.startsWith('hsl')) {
      const hue = Number(color.split('(')[1].split(',')[0]);
      const lightness = Number(color.split(',')[2].replace('%)', ''));
      
      console.log('当前色相：', hue); // 添加调试信息
      
      // 扩大黄色区域的判断范围，并调整亮度判断
      // 黄色区域（45-75度）需要特殊处理
      if (hue >= 45 && hue <= 75) {
        return '#000';  // 黄色区域统一使用黑色文字
      }
      
      // 对于其他颜色，主要依据亮度判断
      return lightness > 50 ? '#000' : '#fff';
    } else {
      // 对于自定义颜色，使用更精确的亮度计算公式
      const rgb = this.hexToRgb(color) || {r: 0, g: 0, b: 0};
      const yiq = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
      
      // 调整阈值为 128（之前是 180），这样可以得到更好的对比度
      return yiq >= 128 ? '#000' : '#fff';
    }
  }

  private hexToRgb(hex: string): {r: number, g: number, b: number} | null {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null;
  }

  constructor() { }

  ngOnInit(): void { }

  ngAfterViewInit() {
    this.updateTextPosition();
    this.updateRippleColor();
    window.addEventListener('resize', () => this.updateTextPosition());
  }

  private updateTextPosition() {
    if (!this.progressBar?.nativeElement || !this.progressText?.nativeElement) return;
    
    const barTotalWidth = this.progressBar.nativeElement.parentElement.offsetWidth;
    const textWidth = this.progressText.nativeElement.offsetWidth;
    const availableWidth = (barTotalWidth * this.barPercentage) / 100;
    
    this.isTextOutside = availableWidth < (textWidth + 16);
  }

  private updateRippleColor() {
    if (!this.progressBar?.nativeElement) return;
    
    // 使用自定义颜色或默认红色
    const color = this.nsColor || '#ff0000';
    let r, g, b;
    
    if (color.startsWith('#')) {
      const rgb = this.hexToRgb(color) || {r: 255, g: 0, b: 0};
      r = rgb.r;
      g = rgb.g;
      b = rgb.b;
    }
    
    // 设置CSS变量
    this.progressBar.nativeElement.style.setProperty('--progress-color-rgb', `${r}, ${g}, ${b}`);
  }

  // 添加一个getter来判断是否溢出
  get isOverflow(): boolean {
    return this.realPercentage > 100;
  }

  // 修改模板中的class绑定
  get progressBarClasses(): {[key: string]: boolean} {
    return {
      'animate': this.nsAnimate,
      'overflow': this.isOverflow
    };
  }
}
